<template>
	<view>
		<template v-if="!isLoading">
			<IndexCard ref="IndexCardRef" v-if="(token || shareId || userId) && isCard" :showM='showM' @init="init" />
			<addMyCard v-else :isIndex="true" :userId="userId" :shareId="shareId" />
		</template>
		<!-- 分享 -->
		<image :src="imgs" mode="widthFix" style="width: 100%;position: fixed;left: 100%;"></image>

		<view class="ntbar" v-if="unread>0">
			<view style="position: relative;">
				<view class="ct">{{unread}}</view>
				<view class="cbt">
					<u-notice-bar :text="text1" icon='volume' direction="column" color="white" bgColor='rgba(0,0,0,0)'
						speed="20" @click.stop="gomsglist"
					
						></u-notice-bar>
					<view class="" > <u-icon @click="getclose" name="close" color="#fff"></u-icon></view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import IndexCard from './indexCard.vue'
	import AddMyCard from './addMyCard.vue'
	import {
		InformationBusinessCard,
		message_list
	} from '@/common/http/api.js'
	export default {
		components: {
			IndexCard,
			AddMyCard
		},
		data() {
			return {
				unread: 0,
				text1: [],
				showM: false,
				userId: '',
				shareId: '',
				token: '',
				isCard: false,
				isLoading: true
			}
		},
		onLoad(e) {
			// 点击用户进入
			if (e.userId) {
				this.userId = e.userId
			}
			if (e.user_id) {
				this.userId = e.user_id
			}
			// 分享进入
			if (e.shareId) {
				this.shareId = e.shareId
			}
			

		
			this.getShare()
		},

		computed: {
			imgs() {
				return this.$store.state.share.share_img
			}
		},
		onShow() {
			this.showM = false
			this.$nextTick(() => {
				this.showM = true
			})
			this.getMessageList()
			this.setShare()
			this.$store.dispatch('updateMessageCount').then(res => {
				if (!this.$store.state.isRefresh) {
					return
				}
				this.$store.commit('setIsRefresh', false)
				this.getShare()

			})
		},
		// onHide() {
		// 	this.setShare()
		// },
		methods: {
			getclose() {
				this.unread = 0
			},
			gomsglist() {

				uni.navigateTo({
					url: "/pagesC/message/message"
				})
			},
			getMessageList() {
				message_list({
					page: 1
				}).then(res => {
					this.unread = res.data.count
					let arr = []
					res.data.list.forEach(item => {
						if (item.status == 0) {
							arr.push(item.title)
						}
					})

					this.text1 = arr

				})
			},
			setShare() {
				let token = uni.getStorageSync('token')
				this.token = token
				if (token) {
					//判断是否领取名片

					uni.showLoading()
					InformationBusinessCard().then(res => {
						uni.hideLoading()
						//获取分享的图片
						this.$store.dispatch('getShare')
					})

				}
			},
			getShare() {
				let token = uni.getStorageSync('token')
				this.token = token
				if (token) {
					//判断是否领取名片
					this.isLoading = true
					uni.showLoading()
					InformationBusinessCard().then(res => {
						if (Array.isArray(res.data) && res.data.length === 0) {
							//没有名片
							this.isCard = false

						} else {
							this.isCard = true
						}
						//获取分享的图片
						this.$store.dispatch('getShare').then(res => {
							this.setReload()
						})
					}).finally(err => {
						uni.hideLoading()
						this.isLoading = false
					})

				} else {
					this.isCard = true
					this.isLoading = false
					this.setReload()
				}
			},
			setReload() {
				this.$nextTick(() => {
					this.$refs.IndexCardRef.getData({
						userId: this.userId,
						shareId: this.shareId,
						otherType: 1, //1首页 2其他
						is_first: true
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-icon__img{
		width: 40rpx !important;
		height: 42rpx !important;
	}
	.ntbar {
		border-radius: 20rpx;
		position: fixed;
		width: 690rpx;
		left: 30rpx;
		bottom: 30rpx;
		z-index: 10;
		background: rgba(0, 0, 0, 0.5);

		.cbt {
			border-radius: 16rpx;
			overflow: hidden;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding-right: 30rpx;
			&>view{
				position: relative;
				z-index: 99;
			}
		}

		.ct {
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			background: #f56c6c;
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FFFFFF;
			font-size: 20rpx;
			left: -10rpx;
			top: -10rpx;
		}

	}
</style>